<template>
  <div>
    <van-nav-bar
      title="AI上报市容顽症事件"
      left-text=""
      left-arrow
      :fixed="true"
      @click-left="onClickLeft"
    />
    <div class="title">现场信息确认</div>
    <van-cell-group>
      <van-cell
        is-link
        title="事件类型"
        @click="typeshow = true"
        :value="typevalue"
      />
      <van-action-sheet
        v-model="typeshow"
        :actions="typeactions"
        @select="typeSelect"
      />
    </van-cell-group>

    <van-cell-group>
      <van-cell title="发生时间" :value="list.createTime" />
    </van-cell-group>

    <van-cell-group>
      <van-cell title="AI探头" :value="list.channelAlias" />
    </van-cell-group>

    <van-cell-group>
      <van-cell
        is-link
        title="所属网格"
        @click="gridshow = true"
        :value="list.ownerGrid"
      />
      <van-action-sheet
        v-model="gridshow"
        :actions="gridactions"
        @select="gridSelect"
      />
    </van-cell-group>

    <van-cell-group>
      <van-cell title="AI照片" icon="photo-o" />
      <div
        class="vimg"
        v-for="(item, index) in list.imageUrl"
        :key="index"
        @click="vimghandle(item)"
      >
        <van-image width="100" height="100" :src="item" />
      </div>
    </van-cell-group>

    <van-cell-group>
      <van-cell title="现场照片上传（必填）" icon="photo-o" />
      <div class="uploadbox">
        <van-uploader
          v-model="uploader"
          :after-read="afterRead"
          :before-delete="picDelete"
          :before-read="beforeRead"
          multiple
          :max-count="6"
        />
      </div>
    </van-cell-group>
    <div class="reportBtn">
      <van-button
        round
        type="info"
        block
        color="linear-gradient(90deg, #00C4C6 0%, #01DC8E 100%)"
        @click="reporthandle"
        >提交</van-button
      >
    </div>
    <div class="fullimg" v-show="fullimgshow" @click="fullimghandle">
      <img :src="fullimgurl" />
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { uploadPic , aiReport } from '../../../utils/api'
import  { compressImage } from '../../../config/compressImage'
export default {
  name: "AIInforconfirm",
  data() {
    return {
      typevalue: "",
      typeshow: false,
      typeactions: [
        { name: "垃圾溢满" },
        { name: "小包垃圾丢弃" },
        { name: "建筑垃圾偷倒" },
        { name: "非市容顽症事件" },
      ],

      // address: "大吉路01号",

      // currentDate: "2021-04-23 13:24:45",

      // pic: [
      //   "https://img01.yzcdn.cn/vant/cat.jpeg",
      //   "https://img01.yzcdn.cn/vant/cat.jpeg",
      // ],

      gridvalue: "",
      gridshow: false,
      gridactions: [{ name: "G0701" }, { name: "G0702" }, { name: "G0703" }],

      uploader: [],
      submitPic:[],
      uploadUrl: "",
      fullimgshow: false,
      fullimgurl: "",
      list:[],
    };
  },
  mounted() {
    if(this.$route.params){
      this.list = this.$route.params.lists;
      this.typevalue = this.list.eventType;
      this.list['region'] = 'AI上报';
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: "/eventDiscoveryMain/eventAIlist" });
    },
    typeSelect(value) {
      this.typevalue = value.name;
      this.typeshow = false;
    },
    gridSelect(value) {
      this.gridvalue = value.name;
      this.gridshow = false;
    },
    timeConfirm(date) {
      this.currentDate = `${date.getFullYear()}-${
        date.getMonth() + 1
      }-${date.getDate()}`;
      this.timeshow = false;
    },
    addresshandle() {
      this.showArea = true;
      setTimeout(() => {
        this.map = new AMap.Map("gdmap", {
          zoom: 15,
          // center: [121.489658, 31.22478],
           center: [121.483793,31.219014],
        });
        let me = this;
        this.map.on("click", function (e) {
          me.regeoCode(e.lnglat);
        });
      });
    },
    regeoCode(lnglat) {
      let marker = new AMap.Marker();
      let geocoder = new AMap.Geocoder({
        city: "021", //城市设为上海，默认：“全国”
        radius: 1000, //范围，默认：500
      });
      this.map.add(marker);
      marker.setPosition(lnglat);
      let me = this;
      geocoder.getAddress(lnglat, function (status, result) {
        if (status === "complete" && result.regeocode) {
          me.address = result.regeocode.formattedAddress;
        } else {
          log.error("根据经纬度查询地址失败");
        }
      });
    },
    reporthandle() {
      if (!this.uploader.length) {
          Toast('请上传现场照片');
          return
      }
        let eventTypes = this.list.eventType == '垃圾溢满'?'2':this.list.eventType == '小包垃圾丢弃'?'1':'0';
        let param = {
          id : this.list.id,
          eventType : eventTypes,
          eventStatus : this.list.eventStatus,
          sceneImageUrls : this.submitPic,
          ownerGrid : this.list.ownerGrid
          // ownerGrid : '0702'
        }
        let datas = this.list;
        aiReport(param).then(res=>{
          let that = this;
          if(res.code === 200){
            Toast.success(res.message)
            that.$router.push({ name: "AIReportDone",params:{detail:datas.id} });
          }else{
            Toast(res.message)
          }
        })

    },
    vimghandle(item) {
      this.fullimgshow = true;
      this.fullimgurl = item;
    },
    fullimghandle() {
      this.fullimgshow = false;
    },
    //图片上传前判断图片格式
    beforeRead(file) {
      if (
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/jpg" &&
        file.type !== "image/bmp" &&
        file.type !== "image/tif" &&
        file.type !== "image/gif" &&
        file.type !== "image/pcx" &&
        file.type !== "image/tga"
      ) {
        this.$toast.fail({
          message: "只可上传图片格式的文件"
        });
        return false;
      }
      return true;
    },
    //图片压缩
    afterRead(file) {
      this.ImageCompression(file)
    },
    //图片删除tab
    picDelete(file){
      const that = this
      for(let i=0;i<that.submitPic.length;i++){
        if (that.submitPic[i].picName === file.file.name) {
            that.submitPic.splice(i, 1);
            that.uploader.splice(i, 1);
          }
      }
    },
    //图片压缩
    ImageCompression(file){
      compressImage(file.content).then(result => {
        if (result.size > file.file.size) {
          //压缩后比原来更大，则将原图上传
          this.uploadFile(file.file, file.file.name, file);
        } else {
          //压缩后比原来小，上传压缩后的
          this.uploadFile(result, file.file.name, file);
        }
      });
    },
    //图片上传
    uploadFile(file, filename, files){
      var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
　　  formData.append('file', file,filename);
      uploadPic(formData).then((res) => {
        if (res.code === 200) {
          res.data['picName'] = filename;
          this.submitPic.push(res.data)
        }
      })
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  width: 100%;
  height: 35px;
  line-height: 35px;
  background: #daf4f1;
  color: #04bfac;
  font-weight: bold;
  text-align: center;
  margin-bottom: 5px;
  margin-top: 46px;
}
#gdmap {
  width: 100%;
  height: 400px;
}
.uploadbox {
  padding: 10px 20px;
  box-sizing: border-box;
}
.reportBtn {
  width: 90%;
  margin: 20px auto;
}
.vimg {
  padding: 3px 0px;
  margin-left: 10px;
  box-sizing: border-box;
  display: inline-block;
}
.fullimg {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1;
}
.fullimg img {
  width: 100%;
  object-fit: contain;
  height: 100%;
}
</style>
